d<template>
<div :class="[$style.container]">
  <div :class="[$style.header]">
    <div>{{type === 'detail' ? '流程详情' : '流程审批'}}</div>
    <el-link type="primary" :underline="false" @click="$router.go(-1)"><span><i class="el-icon-back"></i></span> 返回</el-link>
  </div>
  <div :class="[$style.body]">
    <audit-steps :data="data"></audit-steps>
    <audit-info :data="data" class="mt-4"></audit-info>
    <audit-log :data="data" class="mt-4"></audit-log>
    <audit-form :data="data" :taskId="taskId" class="mt-4" v-if="type === 'audit'"></audit-form>
  </div>
</div>
</template>

<script lang="ts">

import { Vue, Component, Provide, Watch, Ref, Prop } from 'vue-property-decorator'
import AuditSteps from './audit-steps/index.vue'
import AuditInfo from './audit-info/index.vue'
import AuditLog from './audit-log/index.vue'
import AuditForm from './audit-form/index.vue'
import { getProcess } from '@/api/flow'

@Component({
  components: { AuditSteps, AuditInfo, AuditLog, AuditForm }
})
export default class FlowDetail extends Vue {
  @Prop({ type: String, default: 'detail' }) type!: 'audit' | 'detail'

  @Prop() id!: string

  @Prop() taskId!: string

  data: any = null

  loadData () {
    getProcess(this.id).then(data => {
      this.data = data || null
    })
  }

  mounted () {
    this.loadData()
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
  background-color: #fff;
  min-height: calc(100vh - 48px);
}

.header {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #e2e2e2;
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
}

.body {
  padding: 20px;
}
</style>
